<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.1.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/upload.js?v=1.6"></script>


    <style>
        /*.layui-input{height:30px;} !* layui-input 默认太高了，这里固定高度*!*/
        label.required:after {   /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

         .layui-form-label{
             width: 150px;
         }
        .layui-input-block{
            margin-left: 182px;
        }
    </style>

</head>
<body>

<div class="layui-form"  lay-filter="formData" id="app">

    <div class="layui-form-item" v-for="(item,index) in inputColumns" style="margin-top: 5px;margin-right: 20px;">
        <label v-if="item.is_null==1" class="layui-form-label required">{{item.lable}}</label>
        <label v-else class="layui-form-label">{{item.lable}}</label>
        <div class="layui-input-block"  v-if="item.type == '0'" >
            <input type="text" :name="item.key" v-model="formData[item.key]" required  :lay-verify="item.is_null==1?'required':'false'" :placeholder="'请输入'+item.lable" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-input-block" v-if="item.type == '1'" >
            <input class="layui-input"  v-model="formData[item.key]" formData="formData" :id="'formdate'+item.key"  :lay-verify="item.is_null==1?'required':'false'"  placeholder="开始时间yyyy-MM-dd"  t=date  :name="item.key"  autocomplete="off">
        </div>

        <div class="layui-input-block" v-if="item.type == '5'" >
            <input class="layui-input"  v-model="formData[item.key]" formData="formData" :id="'formdate'+item.key"  :lay-verify="item.is_null==1?'required':'false'"  placeholder="yyyy-MM-dd HH:mm:ss" t=datetime  :name="item.key"  autocomplete="off">
        </div>

        <div class="layui-input-block" v-if="item.type == '6'" >
            <select :name="item.key"   v-model="formData[item.key]" lay-filter="*"  :lay-verify="item.is_null==1?'required':'false'"   >
                <option value=""></option>
                <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
            </select>
        </div>

        <div class="layui-input-block" v-if="item.type == '8'"  >
            <select :name="item.key"   v-model="formData[item.key]"  lay-filter="*"    :lay-verify="item.is_null==1?'required':'false'"  >
                <option value=""></option>
                <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
            </select>
        </div>

        <div class="layui-input-block" v-if="item.type == '4'" >
            <div class="layui-upload">
                <input type="hidden"   :name="item.key"   v-model="formData[item.key]"  :lay-verify="item.is_null==1?'required':'false'"   />

                <button type="button" class="layui-btn" file=true :id="'upload-'+item.key" :column="item.key" >图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" :trimages="item.key">
                    </div>
                </blockquote>
            </div>
        </div>


        <div class="layui-input-block" v-if="item.type == '3'" ><!--富文本编辑框-->
            <textarea class="layui-textarea" textarea="true" v-model="formData[item.key]"   :id="'textarea-'+item.key" :column="item.key" style="display: none">
              <!--把编辑器的初始内容放在这textarea即可-->
                {{formData[item.key]}}
            </textarea>
        </div>





    </div>


    <button class="layui-btn" lay-submit lay-filter="formDemo" id="submitbutton" style="display: none;" >立即提交</button>
</div>

<script>
    var form = null;
    var $ = null;
    var upload = null;
    var layedit = null;
    var textareas = {};

    var vueData = {
        inputColumns:[]//录入的字段
        ,formData:{}//提交数据库的值
        ,tableId:""
    };
    var vm = new Vue({
        el: '#app',
        data: vueData,
        created(){
            if(top.data.buttonsItem != undefined){
                vueData.tableId = top.data.buttonsItem.id;
            }else {
                vueData.tableId = top.data.zygl_id;
            }
            this.init();
        },
        methods:{
            init(){
                //Demo
                layui.use(['form','jquery','upload','layedit'], function(){
                    form = layui.form;
                    $ = layui.jquery;
                    upload = layui.upload;
                    layedit = layui.layedit;

                    let other = top.data.other;
                    postBody("/admin/api/DataManagementController/getInputCustomDisplayFields",{tableId: vueData.tableId,other:other},function (res) {
                        vueData.inputColumns = res.data;
                        vm.inputLoad();
                    })

                    form.on('select(*)', function(data){//监听下拉框选择事件
                        console.log(data.elem); //得到select原始DOM对象
                        console.log(data.value); //得到被选中的值
                        console.log(data.othis); //得到美化后的DOM对象
                        let name = $(data.elem).attr("name");
                        vm.formData[name] = data.value;
                    });

                    //监听提交
                    form.on('submit(formData)', function(data){
                        console.log(data.field)
                        return false;
                    });
                });
            },
            inputLoad(){
                vm.$nextTick(function () {
                    console.log("页面渲染完成");
                    form.val("formData", vm.formData);
                    form.render();
                    //所有图片预览赋值
                    $("[file=true]").each(function (index) {
                        let name = $(this).attr("column");
                        let column = $(this).attr("column");
                        let valsrc = $("[name='"+name+"']").val();
                        var srcvalues = valsrc.split(",");
                        for(var a=0;a<srcvalues.length;a++){
                            if(srcvalues[a] != ""){
                                //上传完毕回调
                                var delbutton = '<button type="button" column="'+column+'" onclick="f_delelete_file(this)"  src="'+srcvalues[a]+'" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>';
                                $("[trimages="+column+"]").append('<td style="padding: 10px;text-align: center;" tdcolumn="'+column+'" ><img src="'+srcvalues[a]+'"  style="padding-bottom: 10px;width:80px;height:80px;" width="80px" height="80px" ><br/>'+delbutton+'</td>');
                            }
                        }
                    })
                    //多图片上传
                    layuiFileUploadInit();
                    //初始化富文本框
                    $("[textarea=true]").each(function (index) {
                        let column = $(this).attr("column");
                        //构建一个默认的编辑器
                        layedit.set({
                            uploadImage: {
                                url: '/admin/api/UploadController/dopostTextEdetImageFileUpload?token='+localStorage.getItem("token") //接口url
                                ,type: 'post' //默认post
                            }
                        });
                        let textindex = layedit.build('textarea-'+column);
                        textareas[column] = textindex;
                    })

                    setTimeout(function () {
                        // form.render("select");
                    },1000)


                });
            }
        },
        computed: {
            formDataFun() {
                return JSON.parse(JSON.stringify(this.formData));
            },
        },
        watch:{
            formDataFun:{
                async handler (newValue, oldValue) {
                    let isdif = diff(newValue,oldValue);
                    if(isdif){
                        return;
                    }
                    const res = await postBody("/admin/api/DataManagementController/inputBoxChangeEvent",{tableId:top.data.tableId,mapdata:{"oldValue":oldValue,"newValue":newValue},other:{inputColumns:vueData.inputColumns,other:top.data.other}});
                    if(res.code == 1){
                        $(".layui-form-select").remove();
                        vm.formData = res.data.mapdata.newValue;
                        vm.inputColumns = res.data.other.inputColumns;

                        vm.$nextTick(function (){
                            vm.inputLoad();
                        });

                    }
                },
                deep: true
            }
        }
    })



    //验证必填项
    function verification() {
        $("#submitbutton").click();
        let data = vm.formData;
        let inputs = $("[lay-verify='required']");
        for(let a=0;a<inputs.length;a++){
            let name = $(inputs[a]).attr("name");
            if(data[name]==undefined || data[name] == ""){
                $(inputs[a]).addClass("layui-form-danger");
                top.alert("红*号必输项不能为空!");
                return false;
            }else {
                $(inputs[a]).removeClass("layui-form-danger");
            }
        }
        return true;
    }

    function getData() {
        //var data1 = form.val("formData");
        //获取富文本框的值
        $("[textarea=true]").each(function (index) {
            let column = $(this).attr("column");
            const text = layedit.getContent(textareas[column]);
            vm.formData[column] = text;
        })
        return vm.formData;
    }

    function setData(data) {
        vueData.formData = data;
    }

</script>

</body>
</html>
